<template>
    <div v-if="false">
        <div>12</div>
        <one title="One-1" :data="{ name: 'Lily' }"></one>
        <one title="One-2" :data="{ name: 'Lucy' }"></one>
    </div>

    <div class="flex-test">
        <div v-for="(name, index) in datas" class="item0" :class="{ 'item1': calc1(index) }">
            <div>11</div>
            <div>22</div>
        </div>
    </div>

    <div style="width: 400px; height: 100px; background-color: red;">
        <el-select v-model="value" placeholder="Select" class="select">
            <el-option v-for="item in options" />
        </el-select>

        <select v-model="value" class="orgin">
            <!-- <option disabled value="">请选择一个选项</option> -->
            <option  v-for="item in options" :value="item.value">
                {{ item.value }}
            </option>
        </select>
    </div>

</template>



<script setup lang="ts">
import { reactive, ref } from 'vue'
import one from '../views/one.vue'

const datas = ref([{ name: 'Lily' }, { name: 'Lucy' }, { name: 'Dive' }, { name: 'Tom' }, { name: 'Lihua' },])

const value = ref()
const options = ref([{value:'11', label : '11'}, {value:'22', label : '22'}])

function calc1(idx: any) {
    let val = idx % 2
    return val != 0
}

function calcWidth() {

}

</script>




<style scoped lang="scss">
.flex-test {
    display: flex;
    width: 1000px;
    height: 200px;
    background-color: gray;
    justify-content: space-around;
    //justify-items: flex-end;
    align-items: center;

    .item0 {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: calc(100% / 6);
        height: 30%;
        background-color: red;
    }

    .item1 {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: calc(100% / 6);
        height: 30%;
        background-color: yellow;
    }


}

.select {
    background-color: transparent !important;
    border: 1px solid white;
    color: white;
    width: 200px;

    :deep(.el-input__inner) {
        background-color: transparent !important;
        border: 1px solid white;
        color: white;
    }

}

.orgin{
    background-color: transparent;
    width: 200px;
    height: 40px;
    border-color: white;
    margin: 10px;
}
</style>